<template>
    <div>
        <div class="my_class">
            <div class="my_class_header">
                <p>
                    Hello,你好
                </p>
                <div class="btn">
                    <div class="button">
                    <button @click="addFn()">去登陆</button>
                        </div>
                        <div class="vip">
                            会员优惠码
                        </div>
                </div>
            </div>
            <div class="my_class_bar">
                <div class="my_class_bar_one">
                    <div class="myDing">我的订单</div>
                    <div class="all">
                        <p class="allDing">全部订单</p>
                        <IconFont
                            name="you"
                        />
                    </div>
                </div>
                <ul class="icon_size">
                    <li>
                        <div>
                            <IconFont
                            name="daizhifu"
                        />
                        </div>
                        <p>待支付</p>
                    </li>
                    <li>
                         <div>
                                 <IconFont
                            name="daifahuo"
                        />
                         </div>
                        <p>代发货</p>
                    </li>
                    <li>
                         <div>
                                 <IconFont
                            name="yifahuo"
                        />
                         </div>
                        <p>已发货</p>
                    </li>
                </ul>            
            </div>
            <div class="assets">
                <header>
                    我的资产
                </header>
                <ul class="count">
                    <li>
                        <p>￥0.00</p>
                        <div>余额</div>
                    </li>
                    <li>
                        <p>0</p>
                        <div>积分</div>
                    </li>
                    <li>
                        <p>0</p>
                        <div>优惠卷</div>
                    </li>
                </ul>
            </div>
            <div class="footer">
                <div class="myService">我的服务</div>
                <ul class="my_service">
                    <li
                        v-for="(item,index) in myService"
                        :key="index"
                    >
                        <p>
                            <IconFont
                                :name="item.iconName"
                            />
                        </p>
                        <span>{{item.text}}</span>
                    </li>
                </ul>
            </div>
        </div>
       <FooterBar></FooterBar>
    </div>
</template>

<script>
    export default {
        name:'Mine',
        data() {
            return {
               myService:[
                   {
                     text:'会员中心',
                     iconName:'huangguan'
                   },
                   {
                     text:'收货地址',
                     iconName:'dizhi'
                   },
                   {
                     text:'帮助中心',
                     iconName:'bangzhu'
                   },
                   {
                     text:'客服电话',
                     iconName:'kefu'
                   },
                   {
                     text:'发票中心',
                     iconName:'fapiao'
                   },
                   {
                     text:'我想买的',
                     iconName:'aixin'
                   }
               ] 
            }
        },
        methods: {
            addFn() {
               location.href = "/login"
            }
        },
    }
</script>

<style lang="scss" scoped>
.my_class{
    width: 100%;
    .my_class_header{
        width: 100%;
        height: 130px;
        background: orangered;
        p{
            font-size:14px; 
            color: #fff;
            padding: 20px 0 10px 20px;
        }
        .button>button{
            width: 65px;
            height: 20px;
            border-radius: 20px;
            display: block;
            margin-left: 20px;
            border: 0;
            color: orange;
            background-color: #fff;
            outline: none;
        }
        .vip{
            padding:15px 15px 0 0;
            color: #fff;
        }
    }
}
.btn{
    display: flex;
    justify-content:space-between;
}
.my_class_bar{
    width: 100%;
    height: 110px;
    background: #fff;
    .my_class_bar_one{
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px 0 20px;
        .all{
            display: flex;
            
            .svg_icon_link{
                padding: 8px 5px 0 0;
            }
        }
     
    }
}
.icon_size{
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: space-around;
            align-items: center;
     }
.assets{
    width: 100%;
    height: 85px;
    header{
        height: 30px;
        line-height: 30px;
        color: #000;
        padding-left: 30px;
        font-size: 14px;
    }
    .count{
        padding-top: 5px;
        display: flex;
        text-align: center;
        justify-content: space-around;
        line-height: 20px;
    }
}
.footer{
    width: 100%;
    height: 200px;
    background: #fff;
    margin-top: 15px;
    .myService{
        height: 25px;
        line-height: 25px;
        padding-left: 15px;
        font-size: 16px;
    }
     .my_service{
         margin-top: 20px;
         display: flex;
         flex-wrap: wrap;
         padding-left: 20px;
         li{
             width: 85px;
             height: 50px;
             .svg_icon_link{
                 padding: 0 0 10px 10px;
             }
         }
        }
}
.myDing,.allDing{
    font-size: 14px;
}
</style>